<template>
  <div class="content">
  <el-collapse v-model="activeNames">
    <el-collapse-item v-for="(val,index) in yearOrder" :key="index" :title="val" :name="val">
        <VideoCard 
          v-for="(i,index) in videos[val]" :key="index" 
          :uuid     = "'video-'+val+'-'+index"
          :title    = "i.title"
          :create_date     = "i.create_date"
          :imgUrl   = "i.imgUrl"
          :synopsis   = "i.synopsis"
          :polyvid   =  "i.polyvid"
          :youtubeid =  "i.youtubeid"
          :youkuid   =  "i.youkuid"
        />
    </el-collapse-item>

  </el-collapse>
  </div>
</template>

<script>
import VideoCard from './VideoCard.vue'

export default {
  components: { VideoCard },
  data() {
    return {
      activeNames: [],
      yearOrder: [],
      videos: [],

    };
  },
  created() {
    this.$http.get('/json/HomeVideo.json').then((response) => {
      console.log(response);
      this.activeNames = response.data.activeNames;
      this.yearOrder = response.data.yearOrder;
      this.videos = response.data.videos;
 
    });

  }

};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";
</style>
